<template>
  <div class="index">
    <Header title="佳家惠购" right-icon="iconfont-search" light />
    <!-- 录播图部分 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in ad" :key="index">
        <router-link to="/goodinfo/:id">
          <img :src="item.ad_code" alt="" />
        </router-link>
      </van-swipe-item>
    </van-swipe>
    <!-- 导航栏 -->
    <van-grid clickable square>
      <van-grid-item to="/goodlist/:id">
        <van-image :src="require('../assets/icons/menu-fl.jpg')" />
        <template>
          <span>
            全部分类
          </span>
        </template>
      </van-grid-item>
      <van-grid-item to="/store/index">
        <van-image :src="require('../assets/icons/menu-dpj.jpg')" />
        <template>
          <span>
            店铺街
          </span>
        </template>
      </van-grid-item>
      <van-grid-item to="/brand">
        <van-image :src="require('../assets/icons/menu-ppj.jpg')" />
        <template>
          <span>
            品牌街
          </span>
        </template>
      </van-grid-item>
      <van-grid-item to="/">
        <van-image :src="require('../assets/icons/menu-yhhd.jpg')" />
        <template>
          <span>
            优惠活动
          </span>
        </template>
      </van-grid-item>
      <van-grid-item to="/">
        <van-image :src="require('../assets/icons/menu-tg.jpg')" />
        <template>
          <span>
            团购
          </span>
        </template>
      </van-grid-item>
      <van-grid-item to="/user/order">
        <van-image :src="require('../assets/icons/menu-order.jpg')" />
        <template>
          <span>
            我的订单
          </span>
        </template>
      </van-grid-item>
      <van-grid-item to="/car">
        <van-image :src="require('../assets/icons/menu-car.jpg')" />
        <template>
          <span>
            购物车
          </span>
        </template>
      </van-grid-item>
      <van-grid-item to="/user">
        <van-image :src="require('../assets/icons/menu-user.jpg')" />
        <template>
          <span>
            个人中心
          </span>
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 首页商品列表 -->
    <van-divider
      :style="{ color: '#ff4f02', borderColor: '#ff4f02', padding: '0 16px' }"
    >
      特惠促销
    </van-divider>
    <van-row type="flex" justify="space-around">
      <van-col span="6">
        <div class="van-col-top">
          <img src="../assets/imgs/chongdian.png" alt="" />
          <div class="mask">活动已结束</div>
        </div>

        <p>小米旗舰店正品手机<br />平板通用迷你充电宝</p>
        <div class="vant-bottom">
          <span> ￥59.00</span>
          <span class="iconfont">&#xe640;</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="van-col-top">
          <img src="../assets/imgs/chongdian.png" alt="" />
          <div class="mask">活动已结束</div>
        </div>

        <p>小米旗舰店正品手机<br />平板通用迷你充电宝</p>
        <div class="vant-bottom">
          <span> ￥59.00</span>
          <span class="iconfont">&#xe640;</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="van-col-top">
          <img src="../assets/imgs/chongdian.png" alt="" />
          <div class="mask">活动已结束</div>
        </div>

        <p>小米旗舰店正品手机<br />平板通用迷你充电宝</p>
        <div class="vant-bottom">
          <span> ￥59.00</span>
          <span class="iconfont">&#xe640;</span>
        </div>
      </van-col>
    </van-row>
    <!-- 精品推荐 -->
    <van-divider
      :style="{ color: '#ff4f02', borderColor: '#ff4f02', padding: '0 16px' }"
    >
      精品推荐
    </van-divider>
    <van-row type="flex" justify="space-around" class="jingping">
      <van-col span="6">
        <div class="van-col-top">
          <img src="../assets/imgs/goods.jpg" alt="" />
        </div>
        <p>长虹熨烫机挂烫机家用蒸汽熨斗手持熨衣服神…</p>
        <div class="vant-bottom">
          <span> ￥188.00</span>
          <span class="iconfont">&#xe640;</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="van-col-top">
          <img src="../assets/imgs/goods.jpg" alt="" />
        </div>
        <p>长虹熨烫机挂烫机家用蒸汽熨斗手持熨衣服神…</p>
        <div class="vant-bottom">
          <span> ￥188.00</span>
          <span class="iconfont">&#xe640;</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="van-col-top">
          <img src="../assets/imgs/goods.jpg" alt="" />
        </div>
        <p>长虹熨烫机挂烫机家用蒸汽熨斗手持熨衣服神…</p>
        <div class="vant-bottom">
          <span> ￥188.00</span>
          <span class="iconfont">&#xe640;</span>
        </div>
      </van-col>
    </van-row>
    <!-- 新品上市 -->
    <van-divider
      :style="{ color: '#ff4f02', borderColor: '#ff4f02', padding: '0 16px' }"
    >
      新品上市
    </van-divider>
    <van-row type="flex" justify="space-around" class="jingping">
      <van-col span="6">
        <div class="van-col-top">
          <img src="../assets/imgs/goods.jpg" alt="" />
        </div>
        <p>长虹熨烫机挂烫机家用蒸汽熨斗手持熨衣服神…</p>
        <div class="vant-bottom">
          <span> ￥188.00</span>
          <span class="iconfont">&#xe640;</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="van-col-top">
          <img src="../assets/imgs/goods.jpg" alt="" />
        </div>
        <p>长虹熨烫机挂烫机家用蒸汽熨斗手持熨衣服神…</p>
        <div class="vant-bottom">
          <span> ￥188.00</span>
          <span class="iconfont">&#xe640;</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="van-col-top">
          <img src="../assets/imgs/goods.jpg" alt="" />
        </div>
        <p>长虹熨烫机挂烫机家用蒸汽熨斗手持熨衣服神…</p>
        <div class="vant-bottom">
          <span> ￥188.00</span>
          <span class="iconfont">&#xe640;</span>
        </div>
      </van-col>
    </van-row>
    <!-- 热销商品 -->
    <van-divider
      :style="{ color: '#ff4f02', borderColor: '#ff4f02', padding: '0 16px' }"
    >
      热销商品
    </van-divider>
    <van-row type="flex" justify="space-around" class="jingping">
      <van-col span="6">
        <div class="van-col-top">
          <img src="../assets/imgs/goods.jpg" alt="" />
        </div>
        <p>长虹熨烫机挂烫机家用蒸汽熨斗手持熨衣服神…</p>
        <div class="vant-bottom">
          <span> ￥188.00</span>
          <span class="iconfont">&#xe640;</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="van-col-top">
          <img src="../assets/imgs/goods.jpg" alt="" />
        </div>
        <p>长虹熨烫机挂烫机家用蒸汽熨斗手持熨衣服神…</p>
        <div class="vant-bottom">
          <span> ￥188.00</span>
          <span class="iconfont">&#xe640;</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="van-col-top">
          <img src="../assets/imgs/goods.jpg" alt="" />
        </div>
        <p>长虹熨烫机挂烫机家用蒸汽熨斗手持熨衣服神…</p>
        <div class="vant-bottom">
          <span> ￥188.00</span>
          <span class="iconfont">&#xe640;</span>
        </div>
      </van-col>
    </van-row>
    <!-- 猜你喜欢 -->
    <div class="fav">
      <p>
        <span> 猜你喜欢 </span>
        <a class="iconfont">更多&#xe630;</a>
      </p>
      <ul>
        <li v-for="item in favourite_goods" :key="item.goods_id">
          <img src="../assets/imgs/watch.jpg" alt="" />
          <p>
            {{ item.goods_name }}
          </p>
          <div class="vant-bottom">
            <span> {{ "￥" + item.shop_price }}</span>
            <span class="iconfont">&#xe640;</span>
          </div>
        </li>
      </ul>
    </div>
    <Footer :active="active"></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      active: 0,
      ad: [],
      favourite_goods: [] //猜你喜欢
    };
  },
  created() {
    this.getSwipe();
    this.getGuess();
  },
  methods: {
    async getSwipe() {
      let res = await this.$axios.get("Index/home");
      console.log(res.data);
      if (res.data.status !== 1)
        return this.$notify({ type: "danger", message: res.data.msg });
      this.ad = res.data.result.ad;
      console.log(this.ad);
    },
    async getGuess() {
      let { data: res } = await this.$axios.get("Index/favourite");
      if (res.status !== 1)
        return this.$notify({ type: "danger", message: res.data.msg });
      this.favourite_goods = res.result.favourite_goods;
    }
  }
};
</script>

<style lang="less" >
.index {
  .header {
    .ct {
      font-size: 32px;
    }
    .rt {
      transform: translateY(50%) !important;
    }
  }
  // 轮播图样式
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    background-color: #39a9ed;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .van-grid-item {
    width: 80px !important;
    height: 80px !important;
    .van-image {
      img {
        width: 80px !important;
        height: 80px !important;
      }
    }
    span {
      font-size: 20px;
      color: #333333;
      transform: translateY(24px);
    }
  }
  .van-divider {
    font-size: 32px;
    font-weight: 600;
  }
  .van-col {
    width: 226px;
    height: 446px;
    text-align: center;
    margin-bottom: 119px;
    .van-col-top {
      width: 226px;
      height: 300px;
      img {
        width: 146px;
        height: 251px;
        transform: translateY(20px);
      }
    }
    p {
      font-size: 24px;
      color: #999999;
      line-height: 36px;
      white-space: wrap;
    }
    .mask {
      width: 226px;
      height: 40px;
      background-color: #000000;
      opacity: 0.3;
      color: #fff;
      font-size: 22px;
      line-height: 40px;
    }
    // .vant-bottom {
    //   display: flex;
    //   margin-top: 40px;
    //   font-size: 28px;
    //   justify-content: space-between;
    //   color: #f23015;
    //   .iconfont {
    //     font-size: 26px !important;
    //   }
    // }
  }
  .vant-bottom {
    display: flex;
    margin-top: 40px;
    font-size: 28px;
    justify-content: space-between;
    color: #f23015;
    .iconfont {
      font-size: 26px !important;
    }
  }
  .jingping p {
    font-size: 20px;
  }
  .fav {
    background-color: #f2f2f2;
    margin-bottom: 100px;
    p {
      height: 90px;
      padding: 0 25px;
      margin-bottom: 40px;
      display: flex;
      background-color: #fff;
      align-items: center;
      justify-content: space-between;
      span:nth-child(1) {
        font-size: 32px;
        color: #ff4f02;
      }
      a {
        font-size: 22px;
        color: #999999;
      }
    }
    ul {
      width: 100%;
      padding: 0 25px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    li {
      width: 340px;
      height: 576px;
      margin-bottom: 22px;
      background-color: #fff;
      img {
        width: 340px;
        height: 340px;
      }
      p {
        width: 286px;
        height: 95px;
        color: #333333;
        font-size: 24px;
        margin-top: 27px;
        padding: 0 0;
      }
    }
  }
}
</style>
